<template>
  <div class="reset_wrapper">
    <div class="reset_content">
      <div>
        <div style="text-align: center;padding-top: 50px"><img src="../assets/logo.png" alt="" style="width: 50px;">
        </div>
        <div>
          <p>邮箱：</p>
          <div class="error" v-if="mailValid">{{mail==''?'邮箱不能为空。':'格式不正确。'}}</div>
          <input type="text" v-model="mail" placeholder="请输入邮箱">
          <button @click="getCode"
                  class="get_code" :class="second==0?'':'dark_button'" :disabled="second!=0">
            {{second ==0?'获取验证码':second+'s'}}
          </button>
        </div>
        <div>
          <p>验证码：</p>
          <input type="text" placeholder="请输入" v-model="code">
        </div>
      </div>

      <div>
        <div>
          <p>新密码：</p>
          <div class="error" v-if="passwordValid">{{password==''?'该项为必填项。':'格式不正确。'}}</div>
          <input type="password" v-model="password" placeholder="至少包含大小写、数字、特殊字符三种的8-32个字符" @blur="checkPassword">
        </div>
        <div>
          <p>确认密码：</p>
          <div class="error" v-if="passwordConfirmValid">{{passwordConfirm==''?'该项为必填项。':'两次输入密码不一致。'}}</div>
          <input type="password" v-model="passwordConfirm" placeholder="至少包含大小写、数字、特殊字符三种的8-32个字符"
                 @blur="confirmPassword">
        </div>
        <div>
          <button class="reset_submit" @click="submit"
                  :disabled="mailValid || passwordValid || passwordConfirmValid || (code=='')"
                  :class="(mailValid || passwordValid || passwordConfirmValid || (code==''))?'dark_button':''">提交
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import {checkMail, checkPassword} from '../js/utils';
  import {BackURL} from '../js/config';

  export default {
    name: "resetPwd",
    data() {
      return {
        mail: '',
        code: '',
        password: '',
        passwordConfirm: '',
        mailValid: false,
        passwordValid: false,
        passwordConfirmValid: false,
        interval: '',
        second: 0
      }
    },
    methods: {
      getCode() {
        console.log('获取验证码')
        if (!checkMail(this.mail)) {
          this.mailValid = true;
          return;
        } else {
          this.mailValid = false;
        }
        axios.post(BackURL + 'mail', {mail: this.mail}).then((res) => {
          console.log('mail res', res);
          if (res.data == 2) {
            this.$Notice.success({desc: '验证码发送成功', duration: 2});
            this.second = 30;
            this.interval = setInterval(() => {
              this.second--;
              console.log(this.second);
              if (this.second == 0) {
                clearInterval(this.interval);
                this.second = 0;
              }
            }, 1000)
          } else if (res.data == 0) {
            this.$Notice.warning({desc: '邮箱不存在', duration: 2})
          }
        }).catch((err) => {
          console.log('mail err', err);
        })
      },
      checkPassword() {
        if (checkPassword(this.password)) {
          this.passwordValid = false;
        } else {
          this.passwordValid = true;
        }
      },
      confirmPassword() {
        if (checkPassword(this.password) && this.password == this.passwordConfirm) {
          this.passwordConfirmValid = false;
        } else {
          this.passwordConfirmValid = true;
        }
      },
      submit() {
        axios.put(BackURL + 'mail', {
          mail: this.mail,
          code: this.code,
          password: this.password
        }).then((res) => {
          console.log('put res', res);
          if (res.data == 0) {
            this.$Notice.error({desc: '验证码错误', duration: 2});
          } else {
            this.$Notice.success({desc: '找回密码成功', duration: 2});
            this.$router.push('/login')
          }
        }).catch((err) => {
          console.log('put err', err);
          this.$Notice.error({desc: '找回密码失败', duration: 2})
        })
      }
    },
    mounted() {

    }
  }
</script>

<style scoped lang="scss">
  .reset_wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .reset_content {
    width: 500px;
    height: 100%;
    margin: 0 auto;
    background-color: rgb(237, 237, 237);
    padding: 0 50px;
    p {
      margin: 10px 0;
      font-size: 16px;
      font-weight: 500;
    }
    input {
      width: 300px;
      height: 25px;
      padding: 0 5px;
      border: 1px solid #dddee1;
      margin-right: 10px;
    }
    .reset_submit {
      background-color: #2d8cf0;
      width: 100px;
      height: 30px;
      border-radius: 3px;
      color: #fff;
      font-size: 16px;
      margin-top: 20px;
      margin-left: 150px;
    }
    .dark_button {
      //鼠标变为禁用
      cursor: not-allowed;
      background-color: rgb(162, 161, 158);
    }
  }

  .error {
    font-size: 10px;
    color: red;
  }

  .get_code {
    font-size: 12px;
    height: 25px;
    padding: 0 2px;
    background-color: #2d8cf0;
    color: #fff;
  }
</style>
